<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <title>want fly pig</title>
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/jquery.fullPage.css"/>
    <!--<link href="lib/bootstrap/css/agency.css" rel="stylesheet">-->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/animations.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/index.css"/>

</head>
<body  id="myScrollspy">
<!--导航begin-->
<nav class="navbar hy-navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">企图飞翔的猪</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">企图飞翔的猪</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li data-menuanchor="s1"><a href="#s1">首页</a></li>
                <li data-menuanchor="s2"><a href="#s2">技能简介</a></li>
                <li data-menuanchor="s3"><a href="#s3">项目经验</a></li>
                <li data-menuanchor="s4"><a href="#s4">about me</a></li>
                <li data-menuanchor="s5"><a href="#s5">call me</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!--导航end-->

<div id="fullpage">
        <sction class="section s1" >
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-right navicon">
                        <a id="nav-toggle" class="nav_slide_button" href="#"><span></span></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2 text-center inner">
                        <div class="animatedParent">
                            <h1 class="animated ">致力于前端的小菜鸟<b class="font-yel">朱昀辰</b></h1>
                            <p class="animated ">有热血 . 有情怀</p>
                        </div>
                    </div>
                </div>

            </div>


        </sction>


    <sction class="section s2" >
        <div class="container marginbot-50">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="animatedParent">
                        <div class="section-heading text-center">
                            <h2 class="h-bold">技能简介</h2>
                            <div class="divider-header"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 hidden-xs">
                    <div class=" ptext">
                        <p class="ptext1">
                            1.熟练掌握Html/css，能熟练编写符合W3C标准的web页面，并兼容目前的主流浏览器。
                            2.熟练掌握原生javascript以及jQuery，开发完成各种页面中需要的特效及功能。<br/>
                            3.熟悉HTML5 和CSS3的使用，熟悉常用动画，对HTML语义化有深入理解。<br/>
                            4.熟悉基于AJAX的技术应用开发，熟练使用ajax+json进行前后端数据交互，同时也了解jsonp原理。<br/>
                            5.熟练掌握bootstrap并能使用其开发响应式网站，了解angular.js。<br/>
                            6.熟练掌握git，了解git的常用工作流程，会使用gulp。

                            英语CET-4通过

                        </p>
                        <p class="ptext2">
                            自我介绍	责任心强，思维灵活，交流表达能力清晰，擅于融入团队合作。
                            对新兴事物兴趣浓，喜欢关注互联网IT的开源社区，紧跟时下潮流。
                            喜爱运动，爱好比较广泛，心理素质强，对不同环境的适应力很强。
                        </p>

                    </div>
                </div>
                <div class="col-lg-6 col-xs-12" >
                    <div class="echart" id="main"></div>
                </div>


            </div>
        </div>
    </sction>


    <sction class="section s3" >

        <div class="container">
            <div class="heading">
                <h2>项目展示</h2>
                <p>Project presentation</p>
            </div>

            <!--项目列表begin-->
            <div class="row ">
                <div class="col-lg-4 col-lg-offset-1 col-xs-12 item">
                    <a href="http://www.7do.me/" target="_blank">
                        <img src="image/product1.png" alt="img"/>
                        <div class="mask">
                            <h3 class="tag">启笃科技官网</h3>
                            <p>技术：H5,C3,jQuery,fullpage</p>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-lg-offset-2 col-xs-12 item">
                    <a href="http://www.cqjianan.com/" target="_blank">
                        <img src="image/product2.png" alt="img"/>
                        <div class="mask">
                            <h3 class="tag">重庆建安仪器</h3>
                            <p>技术：div+css布局，javascript</p>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-lg-offset-1 hidden-xs">
                    <a href="#">
                        <img src="image/product3.png" alt="img"/>
                        <div class="mask">
                            <h3 class="tag">维金商务</h3>
                            <p>技术：js，font字体库，bootstrap</p>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-lg-offset-2 hidden-xs">
                    <a href="http://www.360askdoctor.com/">
                        <img src="image/product4.png" alt="img"/>
                        <div class="mask">
                            <h3 class="tag">360问医生等...</h3>
                            <p>技术：html,css,zepto,ajax表单验证等</p>
                        </div>
                    </a>
                </div>
            </div>


            <!--项目列表end-->
        </div>
    </sction>

    <sction class="section s4" >
        <div class="container">
            <h2 class="fade">关于我</h2>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h3>简介</h3>
                    <p class="fade">
                        姓名：朱昀辰
                    </p>
                    <p class="fade" data-delay="200">
                        户籍：重庆市北碚区
                    </p>
                    <p class="fade" data-delay="250">
                        现居住：上海浦东新区三林镇
                    </p>

                    <h3>工作</h3>
                    <p class="fade">
                        职业：web前端工程师
                    </p>
                    <p class="fade" data-delay="200">
                        工作经验：3年
                    </p>
                    <p class="fade" data-delay="250">
                        github：<a href="https://wantflypig.github.io">wantflypig.github.io</a>
                    </p>

                </div>

            </div>
            <i class="huli"></i>
            <i class="houzi"></i>

        </div>
    </sction>

    <sction class="section s5" >
        <div class="container contact">
            <div class="fade call">
                <h2>联系本人</h2>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <p class="p1">
                        <span>QQ：</span>821594837
                    </p>
                    <p class="p2" data-delay="100">
                        <span>手机：</span>18716321253
                    </p>
                </div>
                <div class="col-md-6">
                    <p class="p3">
                        <span>邮箱：</span>821594837@qq.com
                    </p>
                    <p class="p4" data-delay="100">
                        <span>地址：</span>浦东新区三林镇林德路487号
                    </p>
                </div>
            </div>
        </div>
    </sction>
</div>

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
<script src="js/echarts.common.min.js"></script>
<script src="js/index.js"></script>

<script>
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
            {
                name:'about MySelf',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:700, name:'热情', selected:true},
                    {value:679, name:'想法'},
                    {value:1000, name:'适应力'}
                ]
            },
            {
                name:'about MySkills',
                type:'pie',
                radius: ['40%', '55%'],

                data:[
                    {value:175, name:'HTML'},
                    {value:170, name:'CSS'},
                    {value:304, name:'Javascript'},
                    {value:135, name:'jQuery'},
                    {value:105, name:'ajax'},
                    {value:55, name:'bootstrap'},
                    {value:35, name:'angular'},
                ]
            }
        ]
    };

    myChart.setOption(option);
</script>

</body>
</html>